<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../js/ajax.js"></script>
</head>

<body>

</body>
<script>
    // Promise

    // Promise的拓展方法  => 给实例化对象用(动态方法)
    // p.then()
    // p.catch()
    // p.finally()


    // 构造函数的Promise的方法  => 构造函数自己用(静态方法  Array.isArray Date.now)
    // Promise.all()
    // Promise.race()
    // Promise.resolve()
    // Promise.reject()


    // Promise.race()方法同样是将多个 Promise 实例，包装成一个新的 Promise 实例。
    // const p = Promise.race([p1, p2, p3]);
    // Promise.race()方法接受一个数组作为参数，p1、p2、p3都是 Promise 实例

    // p的状态由p1、p2、p3决定，分成两种情况。

    // 只要p1、p2、p3之中有一个实例率先改变状态，p的状态就跟着改变。那个率先改变的 Promise 实例的返回值，就传递给p的回调函数


    // 请求超时功能
    // 指定超时时间(5s), 如果在5s内返回数据 => 成功, 超出5s显示超时





    var p1 = readTxt("../data/1.txt", 1000);
    var p2 = delayTime(5000);

    Promise.race([p1, p2]).then(data => {
        console.log("fulfilled", data);
    }).catch(err => {
        console.log("rejected", err);
    })





    function delayTime(delay = 5000) {
        //  5s后变为 rejected   => 超时
        return new Promise(function (resolve, reject) {
            setTimeout(function () {
                reject("超时了");
            }, delay);
        })
    }



    function readTxt(url, delay = 0, isFulfilled = true) {
        var p = new Promise(function (resolve, reject) {
            setTimeout(function () { //模拟请求延迟
                if (isFulfilled == false) {
                    reject("已失败");
                }
                $.ajax({
                    type: "get",
                    url: url,
                    success: function (txt) {
                        resolve(txt);
                    },
                    error: function (err) {
                        reject(err);
                    }
                })
            }, delay);
        })
        return p; // {pending:undefind} Promise实例 (请求有结果后改变状态)
    }



</script>

</html>